<template>
	<div class="transaction">
		<el-container style="height: 100%;width: 100%;">
			<el-aside style="height: 100%;">
				<p class="">交易管理</p>
				<el-menu :router='true' default-active="/home/transaction/receipt" class="el-menu-vertical-demo">
					<el-menu-item index="/home/transaction/receipt" @click="addTab({name:'/home/transaction/receipt',title:'收单记录'})">
						<span slot="title">收单记录</span>
					</el-menu-item>
					<el-menu-item index="/home/transaction/refund" @click="addTab({name:'/home/transaction/refund',title:'退款记录'})">
						<span slot="title">退款记录</span>
					</el-menu-item>
					<el-menu-item index="/home/transaction/earlySettlement" @click="addTab({name:'/home/transaction/earlySettlement',title:'提前结算记录'})">
						<span slot="title">提前结算记录</span>
					</el-menu-item>
					<el-menu-item index="/home/transaction/transfer" @click="addTab({name:'/home/transaction/transfer',title:'代发转入记录'})">
						<span slot="title">代发转入记录</span>
					</el-menu-item>
					<el-menu-item index="/home/transaction/batchCollection" @click="addTab({name:'/home/transaction/batchCollection',title:'批量代收查询'})">
						<span slot="title">批量代收查询</span>
					</el-menu-item>
					<el-menu-item index="/home/transaction/batchRefund" @click="addTab({name:'/home/transaction/batchRefund',title:'批量退款查询'})">
						<span slot="title">批量退款查询</span>
					</el-menu-item>
					<el-menu-item index="/home/transaction/receiptBill" @click="addTab({name:'/home/transaction/receiptBill',title:'收单对账单'})">
						<span slot="title">收单对账单</span>
					</el-menu-item>
					<el-menu-item index="/home/transaction/realtime" @click="addTab({name:'/home/transaction/realtime',title:'实时代收付查询'})">
						<span slot="title">实时代收付查询</span>
					</el-menu-item>
					<el-menu-item index="/home/transaction/discount" @click="addTab({name:'/home/transaction/discount',title:'优惠结算对账'})">
						<span slot="title">优惠结算对账</span>
					</el-menu-item>
					<el-menu-item index="/home/transaction/receiptSummary" @click="addTab({name:'/home/transaction/receiptSummary',title:'收单记录汇总'})">
						<span slot="title">收单记录汇总</span>
					</el-menu-item>
					<el-menu-item index="/home/transaction/profit" @click="addTab({name:'/home/transaction/profit',title:'分润结算查询'})">
						<span slot="title">分润结算查询</span>
					</el-menu-item>
					<el-menu-item index="/home/transaction/dayDown" @click="addTab({name:'/home/transaction/dayDown',title:'日交易对账单下载'})">
						<span slot="title">日交易对账单下载</span>
					</el-menu-item>
					<el-menu-item index="/home/transaction/dateSend" @click="addTab({name:'/home/transaction/dateSend',title:'到期代发'})">
						<span slot="title">到期代发</span>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<el-container>
				<el-header style="height: 40px;">
					<el-tabs @tab-click="handleClick" v-model="editableTabsValue" type="card" editable
						@edit="handleTabsEdit" style="background-color: #fff;">
						<el-tab-pane :key="item.name" v-for="item in editableTabs" :label="item.title"
							:name="item.name">

						</el-tab-pane>
					</el-tabs>
				</el-header>
				<el-main style="padding: 0;width: 100%;height: 100%;">
					<router-view></router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// 控制侧边栏是否折叠
				isCollapse: false,
				editableTabs: [{
						title: '收单记录',
						name: '/home/transaction/receipt'
					}

				],
				editableTabsValue:"/home/transaction/receipt"
			}
		},
		methods: {
			// 点击标签切换
			handleClick(tab, event) {
				console.log(tab,event);
				this.editableTabsValue = tab.name;
				this.$router.push(tab.name);
			},
			// 添加tab方法
			addTab(tab) {
				// 查找需要添加的节点
				var elem = this.editableTabs.find(item => item.name === tab.name);
				// 如果没有找到则添加
				if (!elem) {
					this.editableTabs.push(tab);
				}
				// 当前tab应该是被选中的
				this.editableTabsValue = tab.name;
			},
			// 删除切换标签
			handleTabsEdit(targetName, action) {
				console.log(targetName, action)
				if (action == "remove") {
					// 找到对应的索引
					var ind = this.editableTabs.findIndex(item => item.name == targetName);
					if (this.editableTabs.length > 1) {
						// 如果当前页面是删除的页面（路由跳转到其他页面吗）
						if (this.$route.path == this.editableTabs[ind].name) {
							// 当前删除标签索引大于0，则切换到前面标签
							var i = ind > 0 ? ind - 1 : ind + 1; //要跳转的页面
							// console.log(ind, i, "第i");
							this.$router.push(this.editableTabs[i].name);
						}


						this.editableTabs.splice(ind, 1);
					} else {
						this.$alert('最少剩下一个', '提示', {
							confirmButtonText: '确定',
						});
					}


				}
			}
		}
	}
</script>

<style scoped="scoped">
	.transaction {
		width: 100%;
		height: 100%;
	}

	.transaction .el-aside {
		width: 180px !important;
		height: 100%;
		background-color: #eaedf2;
	}

	.transaction .el-aside>p {
		width: 100%;
		height: 90px;
		line-height: 96px;
		text-align: left;
		color: #333333;
		font-size: 15px;
		font-weight: 700;
		padding-left: 30px;
		background-color: #eaedf2;
	}

	.transaction .el-aside>ul {
		width: 100%;
		background-color: #eaedf2 !important;
	}

	.transaction .el-aside>ul>li {
		width: 100%;
		color: #333;
		font-size: 14px;
		padding-left: 30px !important;
	}

	.transaction .is-active {
		background-color: #ffffff !important;
	}

	.transaction .el-menu-item:hover {
		background-color: #ffffff !important;
	}
</style>
